import React, { useState } from 'react';

const replies: { [key: string]: string } = {
    '订单如何跟踪？': '您可以在订单页面查看订单状态。',
    '如何退货？': '请在退货页面提交退货申请。',
    '客服工作时间是什么时候？': '我们的客服工作时间是每天9:00至18:00。',
    '有什么其他问题吗？': '请随时提出，我们会尽快回复！',
};

const MessageSender: React.FC = () => {
    const [message, setMessage] = useState('');
    const [messages, setMessages] = useState<{ sender: string; text: string }[]>([]);

    const sendMessage = () => {
        if (message.trim() !== '') {
            const userMessage = {   text: message, sender: '你' };
            setMessages((prev) => [...prev, userMessage]);

            // 获取助手回复
            const assistantReply = getReply(message);
            setMessages((prev) => [...prev, { sender: '助手', text: assistantReply }]);

            // 清空输入框
            setMessage('');
        }
    };

    const getReply = (msg: string): string => {
        // 根据用户输入获得智能回复
        return replies[msg] || '抱歉，我不太明白您的问题。'; // 默认回复
    };

    return (
        <div style={{ display: 'flex', flexDirection: 'column',height:'100%',paddingTop:'-20px' }}>
            <div style={{ position: 'fixed', top: 0, left: 0, width: '100%', backgroundColor: 'blue', padding: '10px', color: 'white', zIndex: 1000 }}>
                
                <h2 style={{ margin: 0 }}>稿定设计助手</h2>
            </div>
            <div 
                className="messages" 
                style={{ 
                    flex: 1, 
                    overflowY: 'auto', 
                    marginBottom: '10px', 
                    marginTop: '50px', // 向下移动常见问题部分
                    marginLeft: '10px', // 向左移动消息区域
                    maxHeight: 'calc(100vh - 150px)', // 留出顶部空间，限制最大高度
                    border: 'none' // 去掉边框
                }}
            >
                {messages.map((msg, index) => (
                    <div 
                        key={index} 
                        className={`message ${msg.sender === '你' ? 'user-message' : 'assistant-message'}`}
                        style={{ 
                            textAlign: msg.sender === '你' ? 'right' : 'left', 
                            margin: msg.sender === '你' ? '5px 0 0 auto' : '5px 0 0 0',
                            maxWidth: '80%', 
                            wordWrap: 'break-word',
                            backgroundColor: msg.sender === '你' ? '#e6f7ff' : '#f1f1f1',
                            borderRadius: '5px',
                            padding: '10px',
                            border: 'none' // 去掉边框
                        }}
                    >
                        <strong>{msg.sender}:</strong> {msg.text}
                    </div>
                ))}
            </div>
            <div style={{ position: 'fixed', bottom: '0', left: '0', right: '0', padding: '10px', backgroundColor: '#fff' }}>
                <div style={{ display: 'flex' }}>
                    <input
                        type="text"
                        value={message}
                        onChange={(e) => setMessage(e.target.value)}
                        placeholder="输入您的消息..."
                        style={{ flex: 1, padding: '10px', border: 'none' }} // 去掉输入框边框
                    />
                    <button onClick={sendMessage} style={{ marginLeft: '10px', padding: '10px' }}>发送</button>
                </div>
            </div>
        </div>
    );
};

export default MessageSender;